<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="明月">
    <title>千网图</title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
        }

        nav {
            margin: 0;
            width: 100%;
            height: 48px;
            background-color: #10c55d;
        }

        nav div {
            width: 1200px;
            height: 48px;
            /* border: 1px solid red; */
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
            line-height: 48px;
            text-align: center;
            cursor: pointer;
        }

        .top a {
            color: #afffd0;
            text-decoration: none;
        }

        .left {
            width: 450px;
            display: flex;
            justify-content: space-between;
            color: #afffd0;
        }

        .left .first {
            width: 65px;
            height: 48px;
            background-color: #01ac48;
        }

        span {
            display: inline-block;
            background-image: url(img/common.png);
            background-size: 239px 632px;
        }

        .img-a {
            width: 15px;
            height: 7px;
            background-position: -185px -27px;
        }

        .img-b {
            width: 25px;
            height: 25px;
            background-position: -125px -380px;
            position: relative;
            top: 3px;
            left: -3px;
        }

        .right {
            width: 250px;
            display: flex;
            justify-content: space-between;
            color: #afffd0;
        }

        .right li button {
            width: 58px;
            height: 31px;
            background-color: #01ac48;
            border: none;
            border-radius: 10px;
        }
        /***************************************************  */

        .center {
            height: 126px;
            width: 1200px;
            margin: 0 auto;
        }

        .center img {
            width: 140px;
            height: 70px;
            margin-left: 30px;
            position: relative;
            top: 23px;
        }

        .all-input {
            display: inline-block;
            width: 515px;
            height: 50px;
            border: 1px solid #b8b8b8;
            margin-left: 80px;
        }
        /* .all-input:hover {
            border: 1px solid #01ac48;
        } */

        .zhan {
            display: inline-block;
            width: 100px;
            line-height: 50px;
            text-align: center;
        }

        .img-c {
            width: 18px;
            height: 10px;
            background-position: -125px -30px;
            margin-left: 10px;
        }

        .all-input input {
            display: inline-block;
            width: 400px;
            height: 35px;
            margin: 0 auto;
            border: none;
            outline: none;
        }

        .search {
            display: inline-block;
            width: 88px;
            height: 50px;
            background-color: #10c75c;
            position: relative;
            bottom: -8px;
            margin-left: -4px;
            padding: 10px 20px;
        }

         .search:hover {
            background-color: #01ac48;
        } 

        .img-d {
            width: 30px;
            height: 30px;
            background-position: -65px -445px;
        }

        .center section {
            width: 520px;
            margin: 0 auto;
            display: flex;
            justify-content: space-around;
            margin-left: 250px;
        }

        .center section p {
            font-size: 12px;
            cursor: pointer;
        }

        .center section p:nth-of-type(2),
        .center section p:nth-of-type(4),
        .center section p:nth-of-type(6),
        .center section p:nth-of-type(7),
        .center section p:nth-of-type(11) {
            color: #30cd71;
        }

        .center section p:nth-of-type(3):hover,
        .center section p:nth-of-type(5):hover,
        .center section p:nth-of-type(8):hover,
        .center section p:nth-of-type(9):hover,
        .center section p:nth-of-type(10):hover {
            color: #30cd71;
        }
        /**************************************  */
        /*************************  */

        .foot {
            width: 1200px;
            margin: 0 auto;
            /* border: 1px solid red; */
            display: flex;
            justify-content: space-between;
            color: #999999;
        }

        footer .left-foot {
            width: 550px;
            display: flex;
            justify-content: space-around;
            font-size: 13px;
        }

        footer .left-foot li:hover {
            color: #30cd71;
        }

        footer .right-foot {
            width: 360px;
            list-style: none;
        }

        .info {
            width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            font-size: 13px;
            border-top: 1px solid #d0d0d0;
            color: #999999;
        }

        .info-left {
            width: 310px;
            display: flex;
            justify-content: space-around;
        }

        .info-left p:hover {
            color: #30cd71;
        }

        .info-right {
            width: 650px;
        }

        .img-e {
            width: 25px;
            height: 26px;
            background-position: -65px -175px;
            position: relative;
            top: 3px;
        }

        .img-f {
            width: 25px;
            height: 25px;
            background-position: -35px -170px;
        }

        .right-foot button {
            width: 123px;
            height: 40px;
            background-color: #30cd71;
            border: none;
            margin: 50px 0;
            border-radius: 5px;
        }

        .img-j {
            width: 25px;
            height: 30px;
            background-position: -36px -205px;
        }

        .img-k {
            width: 30px;
            height: 27px;
            background-position: -66px -207px;
        }

        .img-l {
            position: relative;
            top: 2px;
            width: 27px;
            height: 25px;
            background-position: -160px -20px;
        }
        /********************中间*************************  */

        main {
            height: 1200px;
        }

        main .box {
            width: 100%;
            height: 320px;
            position: relative;
            /* border: 1px solid red; */
            background-color: #100104;
        }

        .main-img {
            width: 1200px;
            height: 320px;
            margin: 0 auto;
        }

        .main-img li {
            position: absolute;
            display: none;
        }

        .main-img li.active {
            display: block;
        }

        .indicator {
            width: 100%;
            position: absolute;
            left: 0;
            bottom: 15px;
            color: white;
            display: flex;
            justify-content: center;
        }

        .indicator li {
            width: 14px;
            height: 14px;
            background-color: #aaa;
            text-align: center;
            line-height: 14px;
            margin: 0 4px;
            border-radius: 50%;
            cursor: pointer;
        }

        .indicator li.play {
            background-color: #10c55b;
        }

        .img-click section {
            width: 50px;
            height: 100px;
            line-height: 80px;
            text-align: center;
            color: white;
            background-color: rgba(0, 0, 0, 0.1);
            position: absolute;
            top: calc(50% - 40px);
            display: none;
            border-radius: 5px;
        }

        .img-click section:hover {
            background-color: #666666;
            cursor: pointer;
        }

        .img-click .prev {
            font-size: 35px;
            left: 0;
        }

        .img-click .next {
            font-size: 35px;
            right: 0;
        }
        /********************************  */

        main .midd {
            width: 1200px;
            margin: 0 auto;
        }

        .midd .first-line,
        .midd .second-line {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
          
        }

        .midd .text {
            width: 600px;
            display: flex;
            justify-content: space-between;
            color: #888888;
              margin-top: 50px;
        }

        .midd .p {
            color: #888888;
        }

        .text li:hover,
        .midd .p:hover {
            color: orange;
        }

        .img-m {
            width: 35px;
            height: 30px;
            background-position: -95px -416px;
            position: relative;
            top: 10px;
            margin-right: 10px;
        }

        .img-n {
            width: 30px;
            height: 30px;
            background-position: -128px -416px;
            position: relative;
            top: 8px;
            /* margin-right: 10px; */
        }

        .second-line li {
            position: relative;
        }

        .img-q {
            width: 56px;
            height: 50px;
            background-position: 0 0;
            position: absolute;
        }

        .midd h2 {
            margin-right: 40px;
            color: #666666;
        }

        .first-line li {
            position: relative;
            width: 290px;
            height: 201px;
        }

        .first-line div {
            width: 290px;
            height: 201px;
            /* border: 1px solid red; */
            background-color: black;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0.5;
            visibility: hidden;
        }

        .first-line div section {
            width: 250px;
            height: 150px;
            border-bottom: 1px solid white;
            border-top: 1px solid white;
            text-align: center;
            position: absolute;
            color: white;
            font-size: 20px;
            bottom: -30px;
            left: 20px;
            transition: all 0.2s linear;
        }

        .second-line div {
            width: 290px;
            height: 390px;
            position: absolute;
            background-color: black;
            /* border: 1px solid red; */
            top: 0;
            left: 0;
            opacity: 0.5;
            visibility: hidden;
            /* transition: all 0.3s linear; */
        }

        .second-line div section {
            width: 290px;
            height: 286px;
            position: absolute;
            transition: all 0.3s linear;
            top: -30px;
        }

        .img-r {
            width: 45px;
            height: 45px;
            background-position: -5px -60px;
            position: relative;
            left: 80px;
        }

        .img-r:hover {
            width: 45px;
            height: 45px;
            background-position: -5px -116px;
            position: relative;
            left: 80px;
        }

        .img-y {
            width: 47px;
            height: 47px;
            background-position: -61px -60px;
            position: relative;
            left: 80px;
        }

        .img-y:hover {
            width: 47px;
            height: 47px;
            background-position: -61px -117px;
            position: relative;
            left: 80px;
        }
    </style>
</head>

<body>
    <header>
        <nav>
            <div class="top">
                <ul class="left">
                    <li class="first"><a href="#">首页</a></li>
                    <li><a href="#">所有分类<span class="img-a"></span></a></li>
                    <li><a href="#">设计创意</a></li>
                    <li><a href="#">办公创意</a></li>
                    <li><a href="#">● ● ●</a></li>
                </ul>
                <ul class="right">
                    <li><a href="#"><span class="img-b"></span>VIP中心</a></li>
                    <li><button>请登录</button></li>
                    <li><a href="#">免费注册</a></li>
                </ul>
            </div>
        </nav>
        <div class="center">
            <img src="img/logo.png" alt="">
            <div class="all-input">
                <div class="zhan">全站<span class="img-c"></span> </div>
                <input type="text" name="" value="" placeholder="800万免费设计素材任意下载">
            </div>
            <div class="search"><span class="img-d"></span></div>
            <section>
                <p>热门搜索：</p>
                <p>七夕</p>
                <p>详情页</p>
                <p>icon</p>
                <p>主图</p>
                <p>秋季</p>
                <p>PPT模板</p>
                <p>EXCEL模板</p>
                <p>首页</p>
                <p>个人简历</p>
                <p>装饰画</p>
            </section>
        </div>
    </header>
    <main>
        <div class="box">
            <ul class="main-img">
                <li class="active"><a href="#"><img src="img/banner01.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/banner02.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/banner03.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/banner04.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/banner05.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/banner06.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/banner07.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/banner08.jpg" alt=""></a></li>
            </ul>
            <ul class="indicator">
                <li class="play"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div class="img-click">
                <section class="prev">&lt;</section>
                <section class="next">&gt;</section>
            </div>
        </div>
        <div class="midd">
            <span class="img-m"></span>
            <h2 style="display:inline-block;">精选专题</h2>
            <p style="display:inline-block;cursor: pointer;" class="p" ;>100万党建材、PPT汇报模板无限下载，每天仅需0.18元立享VIP特权</p>
            <ul class="first-line">
                <li>
                    <img src="img/jxzt01.jpg" alt="">
                    <div class="shadio">
                        <section>
                            <h3>和啤酒有关的</h3>
                            <em>啤酒是如何拯救世界的</em>
                        </section>
                    </div>
                </li>
                <li>
                    <img src="img/jxzt02.jpg" alt="">
                    <div class="shadio">
                        <section>
                            <h3>和啤酒有关的</h3>
                            <em>啤酒是如何拯救世界的</em>
                        </section>
                    </div>
                </li>
                <li>
                    <img src="img/jxzt03.jpg" alt="">
                    <div class="shadio">
                        <section>
                            <h3>和啤酒有关的</h3>
                            <em>啤酒是如何拯救世界的</em>
                        </section>
                    </div>
                </li>
                <li>
                    <img src="img/jxzt04.jpg" alt="">
                    <div class="shadio">
                        <section>
                            <h3>和啤酒有关的</h3>
                            <em>啤酒是如何拯救世界的</em>
                        </section>
                    </div>
                </li>
            </ul>

            <ul class="text">
                <li>
                    <span class="img-n"></span>
                    <h2 style="display:inline-block;margin:0;">精选专题</h2>
                </li>
                <li>招聘海报</li>
                <li>配图海报</li>
                <li>企业文化</li>
                <li>促销海报</li>
                <li>原创插画</li>
            </ul>
            <ul class="second-line">
                <li>
                    <span class="img-q"></span>
                    <img src="img/syhb01.jpg" alt="">
                    <div class="ying">
                        <section>
                            <span class="img-r"></span>
                            <span class="img-y"></span>
                        </section>
                    </div>
                </li>
                <li>
                    <span class="img-q"></span>
                    <img src="img/syhb02.jpg" alt="">
                    <div class="ying">
                        <section>
                            <span class="img-r"></span>
                            <span class="img-y"></span>
                        </section>
                    </div>
                </li>
                <li>
                    <span class="img-q"></span>
                    <img src="img/syhb03.jpg" alt="">
                    <div class="ying">
                        <section>
                            <span class="img-r"></span>
                            <span class="img-y"></span>
                        </section>
                    </div>
                </li>
                <li>
                    <span class="img-q"></span>
                    <img src="img/syhb04.jpg" alt="">
                    <div class="ying">
                        <section>
                            <span class="img-r"></span>
                            <span class="img-y"></span>
                        </section>
                    </div>
                </li>
            </ul>
        </div>
    </main>
    <footer>
        <div class="foot">
            <div class="left-foot">
                <ul>
                    <h3>常见问题</h3>
                    <li>成为特邀设计师</li>
                    <li>成为原创贡献者</li>
                    <li>注册登录</li>
                    <li>帐号/密码</li>
                    <li>充值/售后</li>
                    <li>版权投诉</li>
                </ul>
                <ul>
                    <h3>常见问题</h3>
                    <li>关于我们</li>
                    <li>媒体报道</li>
                    <li>加入我们</li>
                    <li>心系千图</li>
                    <li>每日更新</li>
                </ul>
                <ul>
                    <h3>常见问题</h3>
                    <li>官方微博</li>
                    <li>帮助中心</li>
                    <li>千图导航</li>
                </ul>
                <ul>
                    <h3>常见问题</h3>
                    <li>我图网</li>
                    <li>千库网</li>
                    <li>摄图网</li>
                    <li>包图网</li>
                    <li>视达网</li>
                    <li>更多>></li>
                </ul>
            </div>

            <div class="right-foot">
                <h3>客服咨询</h3>
                <li>
                    <span class="img-e"></span>400-998-7011
                    <p style="display:inline-block;font-size:10px;">(9:00-18:00)</p>
                </li>
                <li><span class="img-f"></span>feedback@58pic.cpm</li>
                <li><button>点我交谈</button></li>

            </div>
        </div>
        <div class="info">
            <div class="info-left">
                <p><span class="img-k"></span></p>
                <p><span class="img-j"></span></p>
                <p>注册声明</p>
                <p>版权声明</p>
                <p>售后服务</p>
            </div>
            <div class="info-right">
                <p>Copyright @2013-2017 千图网 沪ICP备10011451号-6
                    <span class="img-l"></span>上海工商 安全实名认证 信用网站</p>
            </div>
        </div>
    </footer>
</body>

</html>
<script>

     var centerInput=document.querySelector('.center input');
     var allInput=document.querySelector('.all-input');
     centerInput.onfocus=function(){
         allInput.style.borderColor='#10c55b';
     }
      centerInput.onblur=function(){
         allInput.style.borderColor='#b8b8b8';
     }
    // 轮播图
    window.onload = function () {
        var box = document.querySelector('.box');
        var imgLis = document.querySelectorAll('.main-img li');
        var indicatorLis = document.querySelectorAll('.indicator li');
        var prev = document.querySelector('.prev');
        var next = document.querySelector('.next');
        var msg = ['#100104', "#ffff0b", "#fdf100", "#2d9aff", "#89dce4",
            "#fdf7c5", "#110104", "#f4cad8"];
        var index = 0;         //记录当前图片的索引值
        // 上一张
        function prevImg() {
            index = index == 0 ? index = imgLis.length - 1 : index - 1;
            showImg();
        }
        // 下一张
        function nextImg() {
            index = index == imgLis.length - 1 ? 0 : index + 1;
            showImg();
        }
        function showImg() {
            for (var i = 0; i < imgLis.length; i++) {
                imgLis[i].className = '';
                indicatorLis[i].className = '';
            }
            imgLis[index].className = 'active';
            indicatorLis[index].className = 'play'
            box.style.backgroundColor = msg[index];
        }
        var timer = setInterval(nextImg, 1000);
        // 点击指示灯变成绿色
        for (var i = 0; i < indicatorLis.length; i++) {
            indicatorLis[i].index = i; //记录指示灯的索引值
            indicatorLis[i].onmouseover = function () {
                // clearInterval(timer);
                // timer = null;
                index = this.index; //点击跳到当前的指示灯
                showImg();
            }
            // indicatorLis[i].onmouseout = function () {
            //     if (timer != null) //定时器已经开始，不要重复开启
            //      {
            //         return;
            //     }
            //     timer = setInterval(nextImg, 1000);
            // }
        }
        // 点击按钮
        box.onmouseover = function () {
            clearInterval(timer);
            timer = null;
            prev.style.display = 'block';
            next.style.display = 'block';
        }
        box.onmouseout = function () {
            if (timer != null) {
                return;
            }
            timer = setInterval(nextImg, 1000);
            prev.style.display = 'none';
            next.style.display = 'none';
        }
        // 点击上一张
        prev.onclick = function () {
            prevImg();
        }
        next.onclick = function () {
            nextImg();
        }
/************************************************************************/
        // 遮罩层
        var lis =document.querySelectorAll('.first-line li');
        var imgs = document.querySelectorAll('.first-line li img');
        // console.dir(imgs);
        var divs = document.querySelectorAll('.first-line div');
        var sections = document.querySelectorAll('.first-line div section');
        for (var i = 0; i < imgs.length; i++) {

            lis[i].index = i;

            lis[i].onmouseover = function () {
                // console.log(this.index);
                // for (var i = 0; i < imgs.length; i++) {

                //     divs[i].style.visibility = 'hidden';
                //     sections[i].style.bottom = '-30px';
                // }
                divs[this.index].style.visibility = 'visible';
                sections[this.index].style.bottom = '30px';
            }
            lis[i].onmouseout = function () {
                divs[this.index].style.visibility = 'hidden';
                sections[this.index].style.bottom = '-30px';
            }
        }
         var li=document.querySelectorAll('.second-line li');
        var imga = document.querySelectorAll('.second-line li img');
        var diva = document.querySelectorAll('.second-line div');
        var sectiona = document.querySelectorAll('.second-line div section');
        for (var i = 0; i < imga.length; i++) {
            li[i].index = i;
            li[i].onmouseover = function () {
                // for (var i = 0; i < imga.length; i++) {
                //     diva[i].style.visibility = 'hidden';
                //     sectiona[i].style.top = '-30px';
                // }
                diva[this.index].style.visibility = 'visible';
                sectiona[this.index].style.top = '30px';
            }
            li[i].onmouseout = function () {
                diva[this.index].style.visibility = 'hidden';
                sectiona[this.index].style.top = '-30px';

            }
        }
    }

</script>